<template>
  <div>
    <el-main class="main">
      <div>
        <el-row>
          <el-col :span="6">
            <div class="env-appraise">
              <div class="title">室内环境品质</div>
              <div class="time">{{ nowTime }}</div>
              <div class="content">
                <div class="text">
                  <span
                    v-if="evaluateObj.comment && evaluateObj.comment.length > 0"
                  >
                    <span
                      v-for="(item, index) in evaluateObj.comment"
                      :key="index"
                      >{{ item }}</span
                    >
                  </span>
                  <span v-else
                    >当前的环境质量各项指数均在标准范围之内，环境等级为优良，请继续保持!</span
                  >
                </div>
                <div>
                  <div class="evaluate-text">
                    {{ evaluateObj.evaluate | evaluateFil() }}
                  </div>
                  <!-- <el-image :src="require('@/assets/platformDetail/great.png')"></el-image> -->
                </div>
              </div>
            </div>
            <env-compliance
              :fieldPatternId="fieldPatternId"
              :type="robotType"
              style="margin-top: 12px"
            ></env-compliance>
          </el-col>
          <el-col :span="18" style="padding-left: 15px">
            <div class="right">
              <el-row>
                <el-col :span="16">
                  <over-view
                    :fieldPatternId="fieldPatternId"
                    :ts="ts"
                    @changeRobotType="changeRobotType"
                  ></over-view>
                </el-col>
                <el-col :span="8">
                  <EnvGroup
                    :fieldPatternId="fieldPatternId"
                    :ts="ts"
                    :type="robotType"
                  />
                </el-col>
              </el-row>
            </div>

            <!-- 
             -->
          </el-col>
        </el-row>
        <el-row :gutter="15" style="margin-top:15px">
          <el-col :span="11">
            <DeviceInfo />
          </el-col>
          <el-col :span="13">
            <RiskStatistics />
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import OverView from "./components/overView";
import RiskStatistics from "./components/riskStatistics";
import DeviceInfo from "./components/deviceInfo";
import EnvCompliance from "./components/envCompliance/index";
import EnvGroup from "./components/envGroup/index";
import { getAllDeviceData, getDeviceEvaluate } from "@/api/platformManage";
import store from "@/store/modules/user";
import moment from "moment";
export default {
  name: "warningDevice",
  components: {
    OverView,
    EnvCompliance,
    EnvGroup,
    RiskStatistics,
    DeviceInfo,
  },
  data() {
    return {
      ts: null,
      chart: null,
      fieldPatternId: "",
      platformName: "",
      platformLogo: "",
      onlineData: [],
      // timer: null,
      evaluateObj: {},
      evaluateList: [
        //左上角单点评价 GREAT 优，GOOD 良，OK 中，BAD 差
        {
          code: "GREAT",
          lable: "优",
        },
        {
          code: "GOOD",
          lable: "良",
        },
        {
          code: "OK",
          lable: "中",
        },
        {
          code: "BAD",
          lable: "差",
        },
      ],
      robotType: "",
      nowTime: null,
      timer: null,
    };
  },
  provide: function () {
    return {
      curFieldPatternId: () => this.fieldPatternId,
      curDate: () => this.ts,
    };
  },
  filters: {
    evaluateFil(val) {
      switch (val) {
        case "GREAT":
          return "优";
        case "GOOD":
          return "良";
        case "OK":
          return "中";
        case "BAD":
          return "差";
        default:
          return "NC";
      }
    },
  },
  watch: {
    deviceId() {
      this.getDeviceEvaluateFun();
    },
  },
  mounted() {
    if (this.$route.query.fieldPatternId) {
      this.fieldPatternId = this.$route.query.fieldPatternId;
      this.platformName = this.$route.query.name;
      this.platformLogo = this.$route.query.logo;
      this.$store.commit("user/selectProjectMuts", {
        id: this.fieldPatternId,
        name: this.platformName,
        logo: this.platformLogo,
      });
    } else {
      var selectProject = JSON.parse(localStorage.getItem("selectProject"));
      this.fieldPatternId = selectProject.id;
      this.platformName = selectProject.name;
      this.platformLogo = selectProject.logo;
    }

    this.nowTime = moment(new Date()).format("YYYY-MM-DD HH:mm");
    this.timer = setInterval(() => {
      this.nowTime = moment(new Date()).format("YYYY-MM-DD HH:mm");
    }, 1000);
  },
  unmounted() {
    clearInterval(this.timer);
  },
  methods: {
    getDeviceEvaluateFun() {
      getDeviceEvaluate(this.deviceId).then((res) => {
        this.evaluateObj = res.value ? res.value : {};
      });
    },
    changeRobotType(type) {
      this.ts = new Date().getTime();
      this.robotType = type;
    },
  },
};
</script>
<style>
body {
  background-color: #edf0f3;
  font-family: Segoe UI;
}
.header {
  height: 59px;
  width: 100%;
  background-color: #2d9dff;
}
</style>
<style lang="scss" scoped>
.main {
  // padding: 15px 15px 0 15px !important;
  box-sizing: content-box;
  overflow-x: hidden;
}
.right {
  background-color: #fff;
  height: 683px;
  border-radius: 4px;
}
.env-appraise {
  background-image: url("../../../assets/platformDetail/appraise_bg1.png");
  background-size: 100% 100%;
  height: 200px;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  .title {
    font-size: 16px;
    font-weight: bold;
    line-height: 21px;
    color: #0a0a0a;
  }
  .time {
    height: 19px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 18.56px;
    color: rgba(166, 171, 175, 1);
  }
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text {
      font-size: 16px;
      font-weight: 400;
      line-height: 21px;
      color: #535353;
      margin-right: 20px;
    }
  }
}
.evaluate-text {
  background-image: url("../../../assets/platformDetail/great.png");
  min-width: 150px;
  min-height: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
  padding-top: 40px;
  font-weight: bold;
  font-size: 30px;
}
</style>
